import React from 'react';
import { Link, browserHistory } from 'dva/router';
import { Menu, Dropdown, Icon, message, Modal, Badge } from 'antd';


function onUserMenuClick({ key }) {
  if (key === '安全退出') {
    Modal.confirm({
      title: '退出提醒',
      content: '您即将退出本系统，是否继续？',
      okText: '继续退出',
      onOk() {
        setTimeout(() => {
          browserHistory.push('/admin/login');
          message.info('正在退出!');
        }, 1000);
      },
      cancelText: '取消',
      onCancel() {
        message.info('您选择了：取消退出！');
      },
    });
  }
}

const userMenu = (
  <Menu onClick={onUserMenuClick}>
    <Menu.Item key="个人中心"><Icon type="user" /> 个人中心</Menu.Item>
    <Menu.Item key="修改密码"><Icon type="lock" /> 修改密码</Menu.Item>
    <Menu.Divider />
    <Menu.Item key="系统主页">
      <Link to="/admin/home"> <Icon type="desktop" /> 系统主页 </Link>
    </Menu.Item>
    <Menu.Divider />
    <Menu.Item key="安全退出"><Icon type="logout" /> 安全退出</Menu.Item>
  </Menu>
);

function UserMenu() {
  if (Math.random() > 0.5) {
    return (
      <Menu
        mode="horizontal"
        style={{ lineHeight: '64px', float: 'right' }}
        theme="dark"
      >
        <Menu.Item key="消息" style={{ marginRight: '15px' }}>
          <Link to="/admin/home">
            <Badge count={123}>
              <Icon type="message" />
              消息
            </Badge>
          </Link>
        </Menu.Item>

        <Dropdown overlay={userMenu}>
          <a className="ant-dropdown-link">
            <Icon type="user" /> 阿舍(Asher) <Icon type="down" />
          </a>
        </Dropdown>
      </Menu>
    );
  } else {
    return (
      <Menu
        mode="horizontal"
        style={{ lineHeight: '64px', float: 'right' }}
        theme="dark"
      >
        <Menu.Item key="注册">
          <Link to="/register">注册</Link>
        </Menu.Item>
        <Menu.Item key="登录">
          <Link to="/admin/login">登录</Link>
        </Menu.Item>
      </Menu>
    );
  }
}

export default UserMenu;
